import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  ArrowRight,
  Globe,
  Palette,
  Smartphone,
  Code,
  Database,
  Layers,
} from 'lucide-react';

export function HomePage() {
  const { t } = useTranslation();

  const features = [
    {
      icon: Code,
      title: t('home.features.react'),
      description:
        'Modern React 18 with TypeScript for type safety and better development experience.',
    },
    {
      icon: Layers,
      title: t('home.features.router'),
      description:
        'React Router for seamless navigation and routing management.',
    },
    {
      icon: Globe,
      title: t('home.features.i18n'),
      description:
        'Complete internationalization support for multiple languages.',
    },
    {
      icon: Palette,
      title: t('home.features.ui'),
      description: 'Beautiful and accessible UI components with Shadcn/ui.',
    },
    {
      icon: Database,
      title: t('home.features.axios'),
      description: 'Powerful HTTP client with interceptors and error handling.',
    },
    {
      icon: Smartphone,
      title: t('home.features.responsive'),
      description: 'Fully responsive design that works on all devices.',
    },
  ];

  return (
    <div className='space-y-16'>
      {/* Hero Section */}
      <section className='text-center space-y-6'>
        <div className='space-y-4'>
          <h1 className='text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl'>
            {t('home.title')}
          </h1>
          <p className='mx-auto max-w-[700px] text-lg text-muted-foreground sm:text-xl'>
            {t('home.subtitle')}
          </p>
        </div>
        <div className='space-y-4'>
          <p className='mx-auto max-w-[800px] text-muted-foreground'>
            {t('home.description')}
          </p>
          <div className='space-x-4'>
            <Button asChild size='lg'>
              <Link to='/about'>
                {t('home.getStarted')}
                <ArrowRight className='ml-2 h-4 w-4' />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className='space-y-8'>
        <div className='text-center'>
          <h2 className='text-3xl font-bold tracking-tighter sm:text-4xl'>
            {t('home.features.title')}
          </h2>
        </div>
        <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>
          {features.map((feature, index) => {
            const Icon = feature.icon;
            return (
              <Card key={index} className='relative overflow-hidden'>
                <CardHeader>
                  <div className='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4'>
                    <Icon className='h-6 w-6 text-primary' />
                  </div>
                  <CardTitle className='text-xl'>{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className='text-base'>
                    {feature.description}
                  </CardDescription>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </section>

      {/* CTA Section */}
      <section className='text-center space-y-6 bg-muted/50 rounded-lg p-8 md:p-12'>
        <div className='space-y-4'>
          <h2 className='text-3xl font-bold tracking-tighter sm:text-4xl'>
            Ready to get started?
          </h2>
          <p className='mx-auto max-w-[600px] text-muted-foreground'>
            Start building your next project with our enterprise-ready template.
          </p>
        </div>
        <div className='space-x-4'>
          <Button asChild size='lg'>
            <Link to='/contact'>{t('nav.contact')}</Link>
          </Button>
          <Button asChild variant='outline' size='lg'>
            <Link to='/about'>{t('nav.about')}</Link>
          </Button>
        </div>
      </section>
    </div>
  );
}
